.page-mj {
  height: 100%
  .inner {
    display: flex
    .mj-box {
      background-color: var(--img-group-bg)
      min-width: 340px
      max-width: 340px
      padding: 10px
      border-radius: 10px
      color: #ffffff
      font-size: 13px
      margin-left: 10px
      span {
        color: var(--img-title-text-color)
      }
      h2 {
        font-weight: bold
        font-size: 20px
        text-align: center
        color: #47fff1
      }
      // // 隐藏滚动条
      // ::-webkit-scrollbar {
      // width: 0
      // height: 0
      // background-color: transparent
      // }
      .image-container {
        position: relative
        display: inline-block
        .overlay {
          opacity: 0
          position: absolute
          top: 0
          left: 0
          width: 100%
          height: 100%
          background: rgba(0, 0, 0, 0.5) /* 半透明背景 */
          display: flex
          align-items: center
          justify-content: center
          transition: opacity 0.3s ease
        }
      }
      .image-container:hover .overlay {
        opacity: 1
      }
      .img-inline {
        display: flex
        .img-uploader {
          .el-upload {
            border: 1px dashed var(--el-border-color)
            border-radius: 6px
            cursor: pointer
            position: relative
            overflow: hidden
            width: 120px
            transition: var(--el-transition-duration-fast)
            margin-bottom: 10px
            &:hover {
              border-color: var(--el-color-primary)
            }
            .el-icon.uploader-icon {
              font-size: 28px
              color: #8c939d
              width: 100%
              height: 120px
              text-align: center
            }
          }
        }
        .img-list-box {
          .img-item {
            position: relative
            margin-right: 10px
            .el-image {
              width: 120px
              height: 120px
              border-radius: 5px
            }
            .el-button {
              position: absolute
              right: 5px
              top: 5px
              width: 20px
              height: 20px
            }
          }
        }
      }
      .tag-select {
        position: relative
        overflow-x: auto
        overflow-y: hidden
        width: 96%
        margin: auto
        .inner {
          display: flex
          flex-flow: row
          padding-bottom: 10px
          .tag {
            margin-right: 10px
            word-break: keep-all
            // background-color: #312C2C
            color: var(--img-tag-color)
            // border-radius: 5px
            padding: 3px 6px
            cursor: pointer
            font-size: 12px
          }
        }
      }
      .mj-params {
        margin-top: 10px
        overflow: auto
        .param-line {
          padding: 0 10px
          .submit-btn {
            text-align: center
            .el-button {
              width: 100%
              height: 50px
            }
          }
          .el-icon {
            position: relative
          }
          .grid-content {
            // background-color: #383838
            // border-radius: 5px
            padding: 5px 10px
            display: flex
            cursor: pointer
            margin-bottom: 10px
            border: 1px solid var(--img-tpbl-border)
            color: var(--img-tag-color)
            &:hover {
              // background-color: #585858
              border: 1px solid
              border-image-source: var(--liner)
              border-image-slice: 1
            }
            .icon {
              width: 20px
              height: 20px
              // margin-bottom: 5px
            }
            .text {
              margin-top: 5px
              // color:var(--img-tag-color)
            }
          }
          .grid-content.active {
            // color: #47fff1
            background: var(--liner)
            -webkit-background-clip: text
            background-clip: text
            color: transparent
            // background-color: #585858
            border: 1px solid
            border-image-source: var(--liner)
            border-image-slice: 1
          }
          .model {
            background-color: #383838
            border: 1px solid #454545
            border-radius: 5px
            padding: 5px
            margin-bottom: 10px
            display: flex
            flex-flow: column
            align-items: center
            cursor: pointer
            &:hover {
              background-color: #585858
            }
            .el-image {
              height: 30px
              width: 100%
            }
            .text {
              margin-top: 4px
              font-size: 12px
            }
          }
          .model.active {
            color: #47fff1
            background-color: #585858
            border: 1px solid #47fff1
          }
          .form-item-inner {
            display: flex
            align-items: center
            .el-select {
              --el-select-input-focus-border-color: #47FFF1
              --el-input-focus-border-color: #47FFF1
            }
            .el-input__wrapper {
              background: #383838
            }
            .el-input__inner {
              color: #fff
            }
            .el-icon {
              margin-left: 10px
            }
          }
          .img-uploader {
            .el-upload {
              border: 1px dashed var(--el-border-color)
              border-radius: 6px
              cursor: pointer
              position: relative
              overflow: hidden
              width: 100%
              transition: var(--el-transition-duration-fast)
              &:hover {
                border-color: var(--el-color-primary)
              }
              .el-icon.uploader-icon {
                font-size: 28px
                color: #8c939d
                width: 100%
                height: 50px
                text-align: center
              }
            }
          }
        }
        .param-line.pt {
          display: flex
          align-items: center
          padding-top: 5px
          padding-bottom: 5px
        }
      }
    }
    .middle-box {
      .el-image {
        width: 100%
        height: 100%
        overflow: visible
        .el-image-viewer__wrapper {
          img {
            width: auto
            height: auto
          }
        }
        .image-slot {
          display: flex
          flex-flow: column
          justify-content: center
          align-items: center
          min-height: 220px
          color: #ffffff
          overflow: hidden
          height: 100%
          .err-msg-container {
            overflow: hidden
            word-break: break-all
            padding: 15px
            .title {
              font-size: 20px
              text-align: center
              font-weight: bold
              color: #f56c6c
              margin-bottom: 30px
            }
            .opt {
              display: flex
              justify-content: center
            }
          }
          .iconfont {
            font-size: 50px
            margin-bottom: 10px
          }
        }
      }
    }
    .el-form {
      .el-form-item__label {
        color: #ffffff
      }
      .el-input, .el-slider {
        // width: 180px
      }
      .uploader-icon {
        font-size: 24px
        position: relative
        top: 3px
      }
    }
    .task-list-box {
      width: 300px
      color: #ffffff
      overflow-x: hidden
      background: var(--img-history-bg)
      border: solid 1px var(--img-history-border)
      border-radius: 20px
      h2 {
        margin: 15px
        color: var(--img-title-text-color)
      }
      .task-list-inner {
        .el-tabs {
          --el-tabs-header-height: 55px
        }
        .el-tabs__item {
          color: #fff
          font-size: 18px
        }
        .title-tabs .el-tabs__item.is-active {
          color: #47FFF1
          font-size: 18px
        }
        .title-tabs .el-tabs__active-bar {
          background-color: #47FFF1
        }
        .el-textarea {
          --el-input-focus-border-color: #47FFF1
        }
        .el-textarea__inner {
          background: transparent
          color: #fff
        }
        .el-input__wrapper {
          background: transparent
          padding: 5px
        }
        .text {
          margin-bottom: 10px
          color: #6b778c
          font-size: 15px
        }
        .param-line.pt {
          padding-top: 5px
          padding-bottom: 5px
        }
        .form-item-inner {
          display: flex
          align-items: center
          .el-icon {
            margin-left: 10px
          }
        }
        .el-form-item__label {
          color: #ffffff
        }
        // 图片上传样式
        .img-inline {
          display: flex
          .img-uploader {
            .el-upload {
              border: 1px dashed var(--el-border-color)
              border-radius: 6px
              cursor: pointer
              position: relative
              overflow: hidden
              width: 120px
              transition: var(--el-transition-duration-fast)
              margin-bottom: 20px
              &:hover {
                border-color: var(--el-color-primary)
              }
              .el-icon.uploader-icon {
                font-size: 28px
                color: #8c939d
                width: 100%
                height: 120px
                text-align: center
              }
            }
          }
          .img-list-box {
            display: flex
            .img-item {
              width: 120px
              position: relative
              margin-right: 10px
              .el-image {
                width: 120px
                height: 120px
                border-radius: 5px
              }
              .el-button {
                position: absolute
                right: 5px
                top: 5px
                width: 20px
                height: 20px
              }
            }
          }
        }
        .el-row.text-info {
          width: 100%
          padding: 10px 0
          .el-tag {
            margin-right: 10px
          }
        }
        // 提交按钮
        .submit-btn {
          display: none
          padding: 10px 15px 0 15px
          text-align: center
          .el-button {
            width: 100%
          }
        }
        .job-list-box {
          // 任务列表
          @import 'running-job-list.styl'
          .waterfall-box {
            overflow-y: scroll /* 一定要指定父元素超出滚动 */
            overflow-x: hidden
          }
          .finish-job-list {
            .job-item {
              width: 100%
              // height: 100%
              border: 1px solid #666666
              margin: 10px 0
              border-radius: 6px
              position: relative
              .history-title {
                position: absolute
                left: 10px
                right: 10px
                bottom: 0
                h4 {
                  // color: var(--img-title-text-color)
                  max-width: 170px
                }
              }
              .gallery-icon {
                opacity: 0
                position: absolute
                top: 10px
                right: 10px
                font-size: 22px
                cursor: pointer
              }
              &:hover {
                .gallery-icon {
                  opacity: 1
                }
              }
              .el-image {
                &.active {
                  border: 2px #68cf26 solid
                }
              }
              .opt {
                padding-top: 5px
                .opt-line {
                  margin: 6px 0
                  ul {
                    display: flex
                    flex-flow: row
                    li {
                      margin-right: 6px
                      a {
                        padding: 3px 0
                        width: 40px
                        text-align: center
                        border-radius: 5px
                        display: block
                        cursor: pointer
                        background-color: #4E5058
                        color: #ffffff
                        &:hover {
                          background-color: #6D6F78
                        }
                      }
                    }
                    .show-prompt {
                      font-size: 20px
                      cursor: pointer
                    }
                  }
                }
              }
              .remove {
                display: none
                position: absolute
                right: 10px
                top: 10px
              }
              &:hover {
                .remove {
                  display: block
                }
              }
            }
          }
          .el-image {
            width: 100%
            height: 100%
            overflow: visible
            .el-image-viewer__wrapper {
              img {
                width: auto
                height: auto
              }
            }
            .image-slot {
              display: flex
              flex-flow: column
              justify-content: center
              align-items: center
              height: 100%
              min-height: 220px
              color: #ffffff
              overflow: hidden
              .err-msg-container {
                overflow: hidden
                word-break: break-all
                padding: 15px
                .title {
                  font-size: 20px
                  text-align: center
                  font-weight: bold
                  color: #f56c6c
                  margin-bottom: 30px
                }
                .opt {
                  display: flex
                  justify-content: center
                }
              }
              .iconfont {
                font-size: 50px
                margin-bottom: 10px
              }
            }
          }
          .el-image.upscale {
            img {
              // height 310px
            }
            .image-slot {
              min-height: 310px
            }
            .el-image-viewer__wrapper {
              img {
                width: auto
                height: auto
              }
            }
          }
        }
      }
      .no-more-data {
        text-align: center
        padding: 30px
      }
    }
  }
}
.mj-list-item-prompt {
  .el-icon {
    margin-left: 10px
    cursor: pointer
    position: relative
  }
}
.modelVersionSelect {
  .custom-option {
    padding: 10px 0
    span {
      line-height: 1.8
    }
  }
  .el-select-dropdown__item {
    margin: 1px 0
    height: auto
    &.is-selected span:last-child {
      color: var(--select-desc-text-color)
    }
  }
}
// 新增样式
:deep() {
  .el-upload-dragger {
    background: var(--img-textarea-bg)
    border: none
  }
  .page-mj .inner .mj-box .mj-params .param-line .img-uploader .el-upload {
    border: none
  }
  .el-slider__bar {
    background: var(--img-slider-color)
  }
  .el-slider__runway {
    background: var(--img-slider-bg)
  }
  .el-slider__marks-text {
    font-size: 12px
  }
}
.iconTip {
  color: #5A566D
}
.picScale {
  color: var(--img-tag-color)
}
/* 整个滚动条 */
::-webkit-scrollbar {
  /* width: 8px; 对应纵向滚动条的宽度 */
  height: 6px /* 对应横向滚动条的宽度 */
}
.el-upload-dragger svg {
  display: none
}
.el-button {
  --el-button-hover-text-color: initial
}